<script setup>
    import { Field,Checkbox } from 'vant'
    import { ref } from 'vue'
    import { useRoute } from 'vue-router'
    import request from '@/utils/request'
    import FormIndex from '@/components/Form/index.vue'
    import FormItem from '@/components/Form/item.vue'
    const route = useRoute();
    const formRef = ref();
    const checked = ref(false)
    const name = ref("")
    const mobile = ref("")
    const submit = async ()=>{
        let isValid = await formRef.value.validate()
        if(!isValid){
          request({
            url:'/App/api/makeOrder',
            method:'POST',
            data:{
              user_name:name.value,
              user_phone:mobile.value,
              product_id:route.query.product_id,
              promoter_id:route.query.promoter_id
            }
          }).then((res)=>{
            window.location.href = res.data.jump_url
          })
        }
    }
</script>

<template>
  <FormIndex ref="formRef" class="content-wrap" data-title="产品申请">
    <div class="wrap" data-v-80dff8df="">
      <div class="product-zuji" data-v-80dff8df="">
        <img class="zuji-img" src="https://cdn.jipaikeji.com/statics/weapp/bg/zuji-hengfu.png" data-v-80dff8df="">
      </div>
      <div class="product-apply" data-v-80dff8df="">
        <div class="product-title" data-v-80dff8df="">填写申请信息
        </div>
        <div class="tips" data-v-80dff8df="">
          <div class="left" data-v-80dff8df=""></div>
          <div class="text" data-v-80dff8df="">资金安全提醒，点击查看详情</div>
          <div class="right" data-v-80dff8df=""></div>
        </div>
        <div data-v-a7c00274="" data-v-80dff8df="">
          <div class="form-wrap" data-v-a7c00274="">
            <FormItem :rules="[{type:'required',message:'请输入您的姓名'}]" :value="name"></FormItem>
            <FormItem :rules="[{type:'mobile'}]" :value="mobile"></FormItem>
            <Field v-model="name" left-icon="https://cdn.jipaikeji.com/statics/weapp/icon/icon-a-name.png" placeholder="请输入姓名"></Field>
            <Field v-model="mobile" left-icon="https://cdn.jipaikeji.com/statics/weapp/icon/icon-a-mobile.png" placeholder="请输入您的手机号"></Field>
            <Checkbox v-model="checked">阅读知晓并同意 <a href="/agreement?type=2" class="blue">《用户注册同意授权书》</a></Checkbox>
          </div>
        </div>
      </div>
      <div class="product-btn">
        <div @click="submit" class="btn-item fixed">
          <span>下一步</span>
        </div>
      </div>
    </div>
  </FormIndex>
</template>

<style scoped>
  .content-wrap {
    background-color: #f5f5f5;
    overflow: hidden;
  }
  .reserve-head .content-wrap {
    min-height: calc(100vh - 44px);
  }
  .wrap {
    overflow: hidden;
    position: relative;
  }
  .product-zuji, .product-lcb {
    width: 100%;
    background: #fff;
    overflow: hidden;
    z-index: 10;
  }
  .product-zuji img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .product-apply {
    width: 345px;
    padding: 15px;
    background: #fff;
  }
  .product-title {
    color: #333;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
    text-indent: 3px;
    display: block;
    width: 100%;
  }
  .tips {
    width: 213px;
    height: 27px;
    background-color: #eef4ff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .tips .left {
    width: 12px;
    height: 12px;
    margin-left: 8px;
    background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-a-tip.png) center/100% no-repeat;
  }
  .tips .text {
    font-size: 12px;
    color: #1677ff;
    font-weight: 500;
    margin-left: 8px;
  }
  .tips .right {
    width: 8px;
    height: 8px;
    margin-left: 7px;
    background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-a-more.png) center/100% no-repeat;
  }
  .form-wrap /deep/ .van-cell{
    padding:21px 0;
  }
  .form-wrap /deep/ .van-field__left-icon i {
    font-size: 17px;
  }
  .form-wrap /deep/ .van-field__left-icon {
    margin-right: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .form-wrap /deep/ .van-checkbox {
    width: 345px;
    margin: 21px auto 0;
    padding: 0;
    font-size: 12px;
    color: #333;
    font-weight: 500;
  }
  .form-wrap /deep/ .van-checkbox__label {
    font-size: 11px;
  }
  .blue {
    color: #308dff;
  }
  .product-btn {
    width: 100%;
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .btn-item {
    width: 270px;
    height: 45px;
    background: #1677FF;
    border-radius: 22px;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
    margin: 36px auto 75px;
  }
</style>